<template>
  <div class="page-container">
    <header class="toolbar">
      <SearchBar :loading="loading" :model-value="nameFilter" @update:model-value="onSearchInput" @search="onDoSearch" />

      <div class="toolbar-actions">
        <SortControl :sort-by="sortBy" :sort-order="sortOrder" :fields="sortableFields" @change="onChangeSort" />
        <button class="primary" @click="openCreate">新建产品</button>
      </div>
    </header>

    <ProductTable
      :records="records"
      :loading="loading"
      :sort-by="sortBy"
      :sort-order="sortOrder"
      @delete="onDelete"
      @change-sort="onChangeSort"
    />

    <Pagination
      class="mt-16"
      :total="total"
      :page="page"
      :size="size"
      @change="onChangePage"
    />

    <CreateProductModal v-model:visible="createVisible" @created="onCreated" />
  </div>
  
</template>

<script>
import { ref, onMounted } from 'vue'
import { listProducts, deleteProduct } from './api/products'
import SearchBar from './components/SearchBar.vue'
import SortControl from './components/SortControl.vue'
import ProductTable from './components/ProductTable.vue'
import Pagination from './components/Pagination.vue'
import CreateProductModal from './components/CreateProductModal.vue'

export default {
  name: 'App',
  components: { SearchBar, SortControl, ProductTable, Pagination, CreateProductModal },
  setup() {
    const page = ref(1)
    const size = ref(10)
    const sortBy = ref('createTime')
    const sortOrder = ref('desc')
    const nameFilter = ref('')
    const total = ref(0)
    const records = ref([])
    const loading = ref(false)
    const createVisible = ref(false)

    const sortableFields = [
      { label: '名称', value: 'name' },
      { label: '版本', value: 'version' },
      { label: '供应商', value: 'vendor' },
      { label: '包管理器', value: 'packageManager' },
      { label: '创建时间', value: 'createTime' },
      { label: '更新时间', value: 'updateTime' }
    ]

    const fetchList = async () => {
      loading.value = true
      try {
        const res = await listProducts({
          page: page.value,
          size: size.value,
          sortBy: sortBy.value,
          sortOrder: sortOrder.value,
          name: nameFilter.value?.trim() || undefined,
        })
        total.value = res.total
        records.value = res.records
      } catch (err) {
        alert(err?.message || '加载失败')
      } finally {
        loading.value = false
      }
    }

    const onDelete = async (id) => {
      if (!confirm('确认删除该产品？')) return
      try {
        await deleteProduct(id)
        // 若当前页删除后空了，自动回退一页
        if (records.value.length === 1 && page.value > 1) {
          page.value -= 1
        }
        await fetchList()
      } catch (err) {
        alert(err?.message || '删除失败')
      }
    }

    const onChangePage = (p) => {
      page.value = p
      fetchList()
    }

    const onSearchInput = (val) => {
      nameFilter.value = val
    }

    const onDoSearch = () => {
      page.value = 1
      fetchList()
    }

    const onChangeSort = ({ sortBy: sb, sortOrder: so }) => {
      sortBy.value = sb
      sortOrder.value = so
      page.value = 1
      fetchList()
    }

    const openCreate = () => {
      createVisible.value = true
    }

    const onCreated = () => {
      createVisible.value = false
      page.value = 1
      fetchList()
    }

    onMounted(fetchList)

    return {
      page, size, sortBy, sortOrder, nameFilter, total, records, loading,
      sortableFields,
      createVisible,
      onDelete, onChangePage, onSearchInput, onDoSearch, onChangeSort, openCreate, onCreated,
    }
  }
}
</script>

<style scoped>
.page-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar-actions { display: flex; gap: 12px; align-items: center; }
.primary { background: #1677ff; color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.primary:hover { background: #3a89ff; }
.mt-16 { margin-top: 16px; }
</style>

